<template>
  <div>
      <div class="meun_box left"></div>
      <transition name="fader">
      <div class="content1" v-if="content1">
          <div v-for="(item,index) in bubbleList" :key="index+'a'" :class="item.className" @click="reverseContent"></div>
      </div>
      </transition>
      <transition name="fader">
      <div class="content2" v-if="content2" @click="reverseContent">
          <div class="big_content"></div>
          <div class="reverse_arrow arrow_left"></div>
          <div class="reverse_arrow arrow_right"></div>
          <div class="three_content"></div>
          <div class="tree_arrow tree1"></div>
          <div class="tree_arrow tree2"></div>
          <div class="tree_arrow tree3"></div>
      </div>
      </transition>
      <div class="meun_box right"></div>
  </div>
</template>

<script>
import '@/assets/styles/painPoint.css'
export default {
    name:'painPoint',
    data(){
        return{
            content1:false,
            content2:true,
 bubbleList:[{className:'text_bubble1'},{className:'text_bubble2'},{className:'text_bubble3'},{className:'text_bubble4'},{className:'text_bubble5'},
 {className:'text_bubble6'},{className:'text_bubble7'},{className:'text_bubble8'},{className:'text_bubble9'},{className:'text_bubble10'},{className:'text_bubble11'}
 ,{className:'text_bubble12'},{className:'text_bubble13'},{className:'text_bubble14'}]
        }
    },
    methods:{
        reverseContent(){
            this.content1 = !this.content1
            this.content2 = !this.content2
        }
    }
   
}
</script>

<style scoped>
.fader-enter-active,
.fader-leave-active {
  transition: opacity 1s;
}
.fader-enter, .fader-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.meun_box{
    width:14.583333333333334vw;
    height:31.979166666666664vw;
    position: absolute;
    top:13.802083333333334vw
}
.left{
    left: 5.598958333333334vw;
    background: url('../../assets/img/left_menu.png');
    background-size:100% 100% ;
}
.right{
    left: 79.86979166666667vw;
    background: url('../../assets/img/right_menu.png');
    background-size:100% 100% ;
}
.big_content{
    position: absolute;
    width: 43.22916666666667vw;
    height: 23.723958333333332vw;
    background: url('../../assets/img/big_content_all.png');
    background-size: 100% 100%;
    top: 13.802083333333334vw;
    left: 28.411458333333332vw;
}
.reverse_arrow{
    width: 5.260416666666667vw;
    height: 1.0416666666666665vw;
    background: url('../../assets/img/reverse_arrow.png');
    background-size: 100% 100%;
    position: absolute;
    top: 27.447916666666668vw;
}
.arrow_left{
    left: 20.703125vw;
}
.arrow_right{
    left: 74.08854166666666vw;
}
.three_content{
    width: 42.96875vw;
    height: 5.208333333333334vw;
    background: url('../../assets/img/three_text_content.png');
    background-size:100% 100%;
    position: absolute;
    top: 42.552083333333336vw;
    left: 28.541666666666664vw;
}
.tree_arrow{
    width: 1.1197916666666667vw;
    height: 2.994791666666667vw;
    background: url('../../assets/img/tree_arrow.png');
    background-size: 100% 100%;
    position: absolute;
    top: 38.54166666666667vw;
}
.tree1{
    left: 34.375vw;
}
.tree2{
    left: 49.453125vw;
}
.tree3{
    left: 64.32291666666666vw;
}
</style>